<template>
    <div class="content-box" :style="{'left':(isCollapse == false ? '210px':'64px')}">
        <div class="tab-topbox" v-if="isnavoff == true">
            <div class="">
                <el-card shadow="always">
                    <keep-alive>
                        <router-view />
                    </keep-alive>
                </el-card>
            </div>
        </div>
        <div v-else>
            <div class="tab-topbox" v-if="mainTabsActiveName !== 'home'">
                <el-tabs v-model="mainTabsActiveName" closable @tab-remove="removeTabHandle" @tab-click="selectedTabHandle">
                    <el-tab-pane :key="item.name" v-for="item in mainTabs" :label="item.title" :name="item.name">
                        <div class="content-card">
                            <el-card shadow="always">
                                <keep-alive>
                                    <router-view v-if="item.name === mainTabsActiveName" />
                                </keep-alive>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div class="more-box">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <el-button type="primary" size="mini" icon="el-icon-arrow-down">更多</el-button>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
                            <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
                            <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="tab-topbox" v-else style="margin-top: 15px;">
                <div class="content-card-home" >
                    <el-card shadow="always">
                        <div>3</div>
                        <keep-alive>
                            <router-view />
                        </keep-alive>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getCookie } from '../../utils/tools'
export default {
    data() {
        return {
            editableTabsValue: '2',
            // editableTabs: [{
            //     title: 'Tab 1',
            //     name: '1',
            //     content: 'Tab 1 content'
            // }, {
            //     title: 'Tab 2',
            //     name: '2',
            //     content: 'Tab 2 content'
            // }],
            // tabIndex: 2
        }
    },
    computed: {
        mainTabs: {
            get() {
                return this.$store.state.common.editableTabs;
            },
            set(val) {
                this.$store.commit('updateTabsTag', val)
            }
        },
        isnavoff: {
            get() {
                return this.$store.state.common.isnavoff
            },
            // set(val) {
            //     this.$store.commit('updateisnavToggle', val)
            // }
        },
        menuActiveName: {
            get() { return this.$store.state.common.menuActiveName },
            set(val) { this.$store.commit('updatemenuActiveName', val) }
        },
        isCollapse: { //控制菜单是否折叠
            get() {
                return this.$store.state.common.isCollapse;
            },
        },
        mainTabsActiveName: {
            get() { return this.$store.state.common.mainTabsActiveName },
            set(val) { this.$store.commit('updateMainTabsActiveName', val) }
        },
    },
    created() {


    },
    mounted() {

    },
    methods: {
        // tabs, 选中tab
        selectedTabHandle(tab) {
            var tab;
            tab = this.mainTabs.filter(item => item.name === tab.name);
            if (tab.length >= 1) {
                this.menuActiveName = tab[0].name;
                this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
            }
        },
        // tabs, 删除tab
        removeTabHandle(tabName) {
            this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
            if (this.mainTabs.length >= 1) {
                // 当前选中tab被删除
                if (tabName === this.mainTabsActiveName) {
                    var tab = this.mainTabs[this.mainTabs.length - 1]
                    this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
                    this.mainTabsActiveName = this.$route.name;
                }
            } else {
                this.menuActiveName = ''
                this.$router.push({ name: 'home' });
            }
        },
        // tabs, 关闭当前
        tabsCloseCurrentHandle() {
            this.removeTabHandle(this.mainTabsActiveName)
        },
        // tabs, 关闭其它
        tabsCloseOtherHandle() {
            this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
        },
        // tabs, 关闭全部
        tabsCloseAllHandle() {
            this.mainTabs = []
            this.menuActiveName = ''
            this.$router.push({ name: 'home' })
        },
    }
}
</script>
<style lang="scss">
.content-box {
    position: absolute;
    top: 60px;
    right: 0;
}
.tab-topbox {
    position: relative;
    padding: 0 0px;
    .el-tabs__header {
        position: fixed;
        z-index: 10;
        width: 100%;
        padding: 0 78px 0 15px;
        margin: 1px 0 10px;
        background: #ffffff;
    }
}
.more-box {
    position: fixed;
    right: 5px;
    top: 66px;
    z-index: 23;
}
.el-tabs__nav-wrap::after {
    display: none;
}
.content-card {
    padding: 0 10px;
    margin-top: 50px;
}
.content-card-home {
    padding: 0 10px;
}
</style>